<template>
  <div class="admin-detail">
    <h2>详情ID:{{ id }}</h2>
     <div class="content">
      <div class="cover">
        <img :src="detail.cover" />
      </div>
      <div class="name">
        唱片名称:{{detail.album}}
        <br />
        歌手名称:{{detail.singer}}
      </div>
      <div class="info">
        {{detail.info}}
      </div>
    </div>
    <button @click="back">返回</button>
  </div>
</template>

<script>
import list from '../album-list.js'
  export default {
     data(){
      return {
        id:'',
        list
      }
    },
    methods:{
      back(){
        //history.go(-1)
        // this.$router.go(-1)
        this.$router.back()
      }
    },
    computed:{
      //如何从一个数组中查找满足某个条件的某一项
      //this.list找id=this.id
      detail(){
        // if(!this.id) return {};
        return this.list.find(i=>i.id===this.id) || {}
      }
    },
    created(){
      // const url = location.href;
      // const id = url.split('?id=')[1]
      // //substr  指定第二参数长度
      // //substring 指定第二参数下标
      // this.id=id
      // console.log(id);
      //$route 是当前页面的路由对象
      //！ $route 和 $router区别 ！
      this.id=this.$route().query.id
    }
  }
</script>

<style lang="sass" scoped>
.content
  position: relative
  overflow: hidden
  margin: 10% auto
  max-width: 500px
  background: #fff
  border-radius: 5px
  padding: 30px
  .cover
    margin: -30px -30px 20px
    img
      width: 100%
      height: auto
</style>
